

let params = {
    pagenum:1,//获取第一页的数据
    pagesize:2,//每页两条数据
    //state:
    //cate_id:
}
// 封装函数 获取文章 炫染到tbody中
function renderd() {
    axios.get('/my/article/list', { params }).then(res => {
      console.log(res.data);
      let { status, data, total } = res.data;
      if (status === 0) {
        let str = '';
        data.forEach(item => {
          str += `<tr>
              <td>${item.title}</td>
              <td>${item.cate_name}</td>
              <td>${item.pub_date}</td>
              <td>${item.state}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs">编辑</button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
              </td>
            </tr>`;
        });
        $('tbody').html(str);
        // 处理完数据，调用分页函数
        showpage(total);
      }
    });
  }
  
  renderd();

// ---------------------分页----------------------
let laypage = layui.laypage

// 执行一个laypage实例
function showpage(t){
    laypage.render({
        elem:'page',//注意，这里的test1是ID 不用加#号
        count:t,//数据总数，从服务端得到
        limit:params.pagesize,//每页显示几条
        curr:params.pagenum,//当前页
        // prev:'上一篇'
        limits:[2,3,5,10],//下拉框的选项
        layout:['limit','prev','page','next','count','skip'],
        // junp表示切换分页的回调
        jump:function(obj,first) {
            // 首次不执行
            if(!first){
                // do someing
                // obj包含了当前分页所有的参数 比如
                // console.log(obj.curr);//得到当页，以便向服务器端请求对应页的数据
                // console.log(obj.limit);//得到每页显示的条数
                params.pagenum = obj.curr;
                params.pagesize = obj.limits;
                renderd()
            }
        }
    
    })
}

// ------------------------筛选---------------------
axios.get('/my/category/list').then(res => {
    let { status, data } = res.data;
    if (status === 0) {
      // console.log(data);
      let str = '';
      data.forEach(item => {
        str += `<option value="${item.id}">${item.name}</option>`;
      })
      $('#category').append(str);
      // 更新渲染
      let form = layui.form;
      form.render('select');
    }
  })
  
  // 完成筛选
  $('#search').on('submit', function (e) {
    e.preventDefault();
    // 获取下拉框的两个值
    let cate_id = $('#category').val();
    let state = $('#state').val();
    // console.log(cate_id, state);
    // 设置请求参数
    if (cate_id) {
      params.cate_id = cate_id;
    } else {
      delete params.cate_id; // delete用于删除对象的属性
    }
  
    if (state) {
      params.state = state;
    } else {
      delete params.state;
    }
  
    // 筛选的时候，重置pagenum=1
    params.pagenum = 1;
  
    // 发送请求，获取文章
    renderd();
  })